{% extends 'myadmin/base.html' %}
{% block main_body %}
<style>
    /* 紧凑布局核心样式 */
    .form-card {
        background: #fff;
        border-radius: 6px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        padding: 20px;
    }
    .form-section {
        margin-bottom: 20px;
        padding-bottom: 15px;
        border-bottom: 1px solid #f1f1f1;
    }
    .form-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .form-section h4 {
        margin: 0 0 15px;
        font-size: 16px;
        color: #3c8dbc;
        display: flex;
        align-items: center;
    }
    .form-section h4 i {
        margin-right: 8px;
    }
    .form-row {
        display: flex;
        flex-wrap: wrap;
        margin: 0 -10px; /* 抵消列的内边距 */
    }
    .form-col {
        flex: 1;
        min-width: 300px; /* 确保小屏幕下不挤压 */
        padding: 0 10px; /* 列之间的间距 */
        box-sizing: border-box;
    }
    .form-group {
        margin-bottom: 12px; /* 缩小字段间距 */
        width: 100%;
    }
    .form-group label {
        font-weight: 600;
        font-size: 13px;
        margin-bottom: 5px;
        display: block;
        width: 100%;
    }
    .form-control {
        border-radius: 4px;
        padding: 6px 10px;
        font-size: 13px;
        height: 34px;
        width: 100%; /* 输入框宽度100% */
        box-sizing: border-box; /* 包含内边距和边框 */
    }
    .help-text {
        font-size: 12px;
        color: #666;
        margin-top: 3px;
        display: block;
    }
    .required-mark {
        color: #dd4b39;
        margin-left: 3px;
    }
    .btn-group {
        margin-top: 15px;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        padding: 0 10px;
    }
    .btn {
        padding: 6px 15px;
        font-size: 13px;
    }
    /* 新增隐藏/显示过渡效果 */
    .toggle-content {
        transition: all 0.3s ease;
    }
</style>

<script>
    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', function() {
        // 获取自身免疫性疾病选择框和类型输入框
        const hasAutoimmuneSelect = document.querySelector('select[name="has_autoimmune_disease"]');
        const autoimmuneTypeGroup = document.getElementById('autoimmune_diseaseType');
        
        // 初始状态同步
        updateAutoimmuneTypeVisibility();
        
        // 监听选择变化
        hasAutoimmuneSelect.addEventListener('change', updateAutoimmuneTypeVisibility);
        
        // 控制显示/隐藏的函数
        function updateAutoimmuneTypeVisibility() {
            if (hasAutoimmuneSelect.value === 'True') {
                // 显示时恢复样式
                autoimmuneTypeGroup.style.display = 'block';
                autoimmuneTypeGroup.style.opacity = '1';
                autoimmuneTypeGroup.style.height = 'auto';
                autoimmuneTypeGroup.style.overflow = 'visible';
            } else {
                // 隐藏时清除空间
                autoimmuneTypeGroup.style.display = 'none';
                autoimmuneTypeGroup.style.opacity = '0';
                autoimmuneTypeGroup.style.height = '0';
                autoimmuneTypeGroup.style.overflow = 'hidden';
            }
        }
    

        // 获取糖尿病选择框和类型选择框元素
        const hasDiabetesSelect = document.querySelector('select[name="has_diabetes"]');
        const diabetesTypeGroup = document.getElementById('diabetesTypeGroup');
        
        // 初始隐藏糖尿病类型选择框
        updateDiabetesTypeVisibility();
        
        // 监听糖尿病选择框变化
        hasDiabetesSelect.addEventListener('change', updateDiabetesTypeVisibility);
        
        // 控制糖尿病类型选择框显示/隐藏的函数
        function updateDiabetesTypeVisibility() {
            if (hasDiabetesSelect.value === 'True') {
                // 选择"是"时显示
                diabetesTypeGroup.style.display = 'block';
                diabetesTypeGroup.style.opacity = '1';
            } else {
                // 选择"否"时隐藏
                diabetesTypeGroup.style.display = 'none';
                diabetesTypeGroup.style.opacity = '0';
            }
        }
    });
</script>

<section class="content-header">
    <h1>账号管理 <small>添加用户</small></h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-home"></i> 首页</a></li>
        <li><a href="#">账号管理</a></li>
        <li class="active">添加用户</li>
    </ol>
</section>

<section class="content">
    <div class="row">
        <div class="col-md-12">
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">用户信息录入</h3>
                </div>
                <form method="post" action="{% url 'myadmin_users_insert' %}" class="form-card">
                    {% csrf_token %}
                    
                    <!-- 1. 基础账号信息 -->
                    <div class="form-section">
                        <h4><i class="fa fa-user-circle"></i> 基础账号信息</h4>
                        <div class="form-row">
                            <div class="form-col">
                                <div class="form-group">
                                    <label>用户名 <span class="required-mark">*</span></label>
                                    <input type="text" name="username" class="form-control" required>
                                    <span class="help-text">字母/数字/下划线，3-20位</span>
                                </div>
                                <div class="form-group">
                                    <label>全名 <span class="required-mark">*</span></label>
                                    <input type="text" name="full_name" class="form-control" required>
                                    <span class="help-text">用户真实姓名</span>
                                </div>
                                <div class="form-group">
                                    <label>密码 <span class="required-mark">*</span></label>
                                    <input type="password" name="password" class="form-control" required>
                                    <span class="help-text">至少8位，含字母和数字</span>
                                </div>
                                <div class="form-group">
                                    <label>邮箱 <span class="required-mark">*</span></label>
                                    <input type="email" name="email" class="form-control" required>
                                    <span class="help-text">用于账号验证</span>
                                </div>
                            </div>
                            
                            <!-- 2. 个人基本信息 -->
                            <div class="form-col">
                                <div class="form-group">
                                    <label>手机号 <span class="required-mark">*</span></label>
                                    <input type="tel" name="phone" class="form-control" required>
                                    <span class="help-text">11位有效手机号</span>
                                </div>
                                <div class="form-group">
                                    <label>性别</label>
                                    <select name="gender" class="form-control">
                                        <option value="male">男</option>
                                        <option value="female">女</option>
                                        <option value="other">其他</option>
                                        <option value="prefer_not_to_say">不愿透露</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    &nbsp;
                                    <label>生日</label>
                                    <input type="date" name="birth_date" class="form-control">
                                </div>
                                <div class="form-group">
                                    &nbsp;
                                    <label>当前状态</label>
                                    <select name="status" class="form-control">
                                        <option value="1" {% if user.status == 1 %}selected{% endif %}>正常</option>
                                        <option value="2" {% if user.status == 2 %}selected{% endif %}>禁用</option>
                                        <option value="6" {% if user.status == 6 %}selected{% endif %}>管理员</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 3. 身体信息 -->
                    <div class="form-section">
                        <h4><i class="fa fa-heartbeat"></i> 身体基本信息</h4>
                        <div class="form-row">
                            <div class="form-col">
                                <div class="form-group">
                                    <label>身高(cm)</label>
                                    <input type="number" name="height_cm" class="form-control" min="50" max="250" step="0.1">
                                </div>
                            </div>
                            <div class="form-col">
                                <div class="form-group">
                                    <label>体重(kg)</label>
                                    <input type="number" name="weight_kg" class="form-control" min="10" max="300" step="0.1">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 4. 健康状况信息 -->
                    <div class="form-section">
                        <h4><i class="fa fa-medkit"></i> 健康状况信息</h4>
                        <div class="form-row">
                            <div class="form-col">
                                <div class="form-group">
                                    <label>是否有自身免疫性疾病</label>
                                    <select name="has_autoimmune_disease" class="form-control">
                                        <option value="False">否</option>
                                        <option value="True">是</option>
                                    </select>
                                </div>
                                <!-- 自身免疫性疾病类型输入框（默认隐藏） -->
                                <div class="form-group toggle-content" id="autoimmune_diseaseType" style="display: none; opacity: 0;">
                                    <label>自身免疫性疾病类型</label>
                                    <input type="text" name="autoimmune_disease_type" class="form-control" placeholder="如：类风湿性关节炎">
                                </div>
                                <div class="form-group">
                                    <label>是否有高血压</label>
                                    <select name="has_hypertension" class="form-control">
                                        <option value="False">否</option>
                                        <option value="True">是</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-col">
                                <div class="form-group">
                                    <label>是否有糖尿病</label>
                                    <select name="has_diabetes" class="form-control">
                                        <option value="False">否</option>
                                        <option value="True">是</option>
                                    </select>
                                </div>
                                <!-- 糖尿病类型选择框（默认隐藏） -->
                                <div class="form-group toggle-content" id="diabetesTypeGroup" style="display: none; opacity: 0;">
                                    <label>糖尿病类型</label>
                                    <select name="diabetes_type" class="form-control">
                                        <option value="type1">1型糖尿病</option>
                                        <option value="type2">2型糖尿病</option>
                                        <option value="gestational">妊娠期糖尿病</option>
                                        <option value="other">其他</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label>是否有高血脂</label>
                                    <select name="has_hyperlipidemia" class="form-control">
                                        <option value="False">否</option>
                                        <option value="True">是</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 其他慢性病（全宽） -->
                        <div class="form-group" style="padding: -1 10px;">
                            <label>其他慢性病情况</label>
                            <textarea name="other_chronic_conditions" class="form-control" rows="2" placeholder="如：哮喘、过敏等其他健康问题"></textarea>
                        </div>
                    </div>
                    
                    <!-- 操作按钮区 -->
                    <div class="btn-group">
                        <button type="button" class="btn btn-default" onclick="window.history.back();">
                            <i class="fa fa-arrow-left"></i> 返回
                        </button>
                        <button type="reset" class="btn btn-default">
                            <i class="fa fa-refresh"></i> 重置
                        </button>
                        <button type="submit" class="btn btn-primary">
                            <i class="fa fa-check"></i> 保存用户
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</section>
{% endblock %}